<template>
    <div :class="{mydisabled:disabled,mydisabled_not:!disabled}">
        <component v-if='components_name && field' :is='components_name' :field="field" :ref="field.name" :ctl="ctl" @setVo='toSetEditVo'
                   :param="param" :editType="editType"></component>
        <div v-else>
            {{field.title}}
        </div>
        <div class="mydimmer"></div>
    </div>
</template>

<script>
    import tool from 'src/util/tool';
    import util from '_util/index';
    import logic from '_logic';

    import mytext from 'components/field/text';
    import myhidden from 'components/field/hidden';
    import myenum from 'components/field/enum';
    import enum_many from 'components/field/enum_many';
    import enum_chb from 'components/field/enum_chb';
    import mybind from 'components/field/bind';
    import mytextArea from 'components/field/textArea';
    import mydate from 'components/field/date';
    import mypic from 'components/field/pic';
    import mypics from 'components/field/pics';
    import mynum from 'components/field/num';
    import field_zip from 'components/field/field_zip';
    import city from 'components/field/city';
    import rich from 'components/field/rich';
    import custom from 'components/field/custom';
    import show_text from 'components/field/show_text';
    import show_line from 'components/field/show_line';
    import show_rich from 'components/field/show_rich';
    import date_range from 'components/field/date_range';


    export default {
        data() {
            return {
                val: '',
                disabled:false
            }
        },
        components: {
            city,
            mytext,
            myhidden,
            custom,
            show_line,
            show_text,
            show_rich,
            rich,
            mytextArea,
            mydate,
            myenum,
            date_range,
            enum_many,
            enum_chb,
            mypic,
            mypics,
            mynum,
            field_zip,
            mybind
        },
        props: ['field', 'ctl', 'param','editType'],
        methods: {
            up_disable([target_field,targetVal]) {
                if(target_field==this.field.name) {
                    this.disabled=targetVal==1;
                }
            },
            toSetEditVo(name, val) {
                this.$emit('setVo', name, val)
            },
            doActive(params){
                for(let ref in this.$refs){
                    if(this.$refs[ref].doActive){
                        this.$refs[ref].doActive(params);
                    }
                };
            }
        },
        created() {
            logic.edit.setVal(this)

            let op = util.getOp(this);
            let showType =this.field.showType
            switch (op) {
                case 'insert':
                    if(showType==3) {
                        this.disabled=true;
                    }
                    break;
                case 'update':
                    if(showType==2) {
                        this.disabled=true;
                    }
                    break;
            }

//      util.eventOn(this, 'up_fval', this.up_fval);
            util.eventOn(this, 'up_disable', this.up_disable);
        },
        computed: {
            components_name() {
                if (!this.field)
                    return null;
                let str = ''
                switch (this.field.type) {
                    case 12:
                        str = 'city';//城市
                        break;
                    case 14:
                        str = 'show_line';//单行展示
                        break;
                    case 15:
                        str = 'show_text';//文本展示
                        break;
                    case 16:
                        str = 'show_rich';//富文本展示
                        break;
                    case 17:
                        str = 'date_range';//日期范围
                        break;
                    case 18:
                        str = 'enum_many';//枚举(多选)
                        break;
                    case 19:
                        str = 'enum_chb';//枚举(checkbox)
                        break;
                    case 20:
                        str = 'myhidden';//隐藏字段
                        break;
                    case 13:
                        str = 'custom';//自定义
                        break;
                    case 11:
                        str = 'field_zip';//字段组
                        break;
                    case 1:
                        str = 'mytext';//字符串
                        break;
                    case 9:
                        str = 'rich';//富文本
                        break;
                    case 6:
                        str = 'mybind';//绑定
                        break;
                    case 2:
                        str = 'mytextArea';//文本
                        break;
                    case 5:
                        str = 'mydate';//日期
                        break;
                    case 7:
                        str = 'mypics';//图片
                        break;
                    case 10:
                        str = 'mypics';//图片
                        break;
                    case 4:
                        str = 'mynum';//数字
                        break;
                    case 3:
                        str = 'myenum';//枚举(单选)
                        break;
                    default:
                        str = null
                }
                return str;
            }
        },
        destroyed() {
        },
        updated() {
        }
    }
</script>
<style rel="stylesheet/less" lang="less" scoped>
    .mydisabled {
        position: relative;
        .mydimmer{
            position: absolute;
            left: -5px;
            right:0;
            top: -5px;
            bottom: -5px;
            background-color: rgba(0,0,0,0.3);
            z-index:999;
            border-radius:5px;
        }
        .mydisabled{
            .mydimmer{
                display: none;
            }
        }
    }
    .mydisabled_not{
        .mydisabled{
            .mydimmer{
                display: block;
            }
        }
        .mydimmer{
            display: none;
        }
    }
</style>